<#escape x as x?html>
<el-form-item label="${widget.name}" prop="${widget.model!''}">
    <#if widget.type == 'input'>
        <#if widget.options.dataType == 'number' || widget.options.dataType == 'integer' || widget.options.dataType == 'float'>
        <el-input
                v-model.number="${dataModel}"
                type="number"
                placeholder="${widget.options.placeholder}"
                style="{width: ${widget.options.width}}"
                :disabled="${widget.options.disabled?string("true", "false")}"
        />
        <#else>
        <el-input
                v-model="${dataModel}"
                type="${widget.options.dataType}"
                placeholder="${widget.options.placeholder}"
                style="{width: ${widget.options.width}}"
                :disabled="${widget.options.disabled?string("true", "false")}"
        />
        </#if>
    <#elseif widget.type == 'textarea'>
        <el-input
                v-model="${dataModel}"
                type="textarea"
                :rows="5"
                placeholder="${widget.options.placeholder}"
                style="{width: ${widget.options.width}}"
                :disabled="${widget.options.disabled?string("true", "false")}"
        />
    <#elseif widget.type == 'number'>
        <el-input-number
                v-model="${dataModel}"
                style="{width: ${widget.options.width}}"
                step="${widget.options.step}"
                controls-position="right"
                :disabled="${widget.options.disabled?string("true", "false")}"
                min="${widget.options.min}"
                max="${widget.options.max}"
        />
    <#elseif widget.type == 'radio'>
        <el-radio-group
                v-model="${dataModel}"
                style="{width: ${widget.options.width}}"
                :disabled="${widget.options.disabled?string("true", "false")}"
        >
            <#if widget.options.remote>
              <#assign options=widget.options.remoteOptions>
            <#else>
               <#assign options=widget.options.options>
                <#list options as item>
                    <el-radio
                            key="${item_index}"
                            style="{display: ${widget.options.inline ? string('inline-block','block')}}"
                            label="item.value"
                    >
                        ${widget.options.showLabel ? string(item.label , item.value)}
                    </el-radio>
                </#list>
            </#if>
        </el-radio-group>
    <#elseif widget.type == 'checkbox'>
        <el-checkbox-group
                v-model="${dataModel}"
                style="{width: ${widget.options.width}}"
                :disabled="${widget.options.disabled?string("true", "false")}"
        >
            <#if widget.options.remote>
                <#assign options=widget.options.remoteOptions>
            <#else>
                <#assign options=widget.options.options>
                <#list options as item>
                    <el-checkbox
                            key="${item_index}"
                            style="{display: ${widget.options.inline ? string('inline-block','block')}}"
                            label="${item.value}"
                    >
                        ${widget.options.showLabel ? string(item.label , item.value)}
                    </el-checkbox>
                </#list>
            </#if>
        </el-checkbox-group>
    <#elseif widget.type == 'time'>
        <el-time-picker
                v-model="${dataModel}"
                is-range="${widget.options.isRange}"
                placeholder="${widget.options.placeholder}"
                start-placeholder="${widget.options.startPlaceholder}"
                end-placeholder="${widget.options.endPlaceholder}"
                :readonly="${widget.options.readonly?string("true", "false")}"
                :disabled="${widget.options.disabled?string("true", "false")}"
                :editable="${widget.options.editable?string("true", "false")}"
                :clearable="${widget.options.clearable?string("true", "false")}"
                :arrow-control="${widget.options.arrowControl?string("true", "false")}"
                value-format="${widget.options.format}"
                style="{width: ${widget.options.width}}"
        />
    <#elseif widget.type=='date'>
        <el-date-picker
                v-model="${dataModel}"
                type="${widget.options.type}"
                placeholder="${widget.options.placeholder}"
                start-placeholder="${widget.options.startPlaceholder}"
                end-placeholder="${widget.options.endPlaceholder}"
                :readonly="${widget.options.readonly?string("true", "false")}"
                :disabled="${widget.options.disabled?string("true", "false")}"
                :editable="${widget.options.editable?string("true", "false")}"
                :clearable="${widget.options.clearable?string("true", "false")}"
                value-format="${widget.options.timestamp ? string('timestamp' , widget.options.format)}"
                format="${widget.options.format}"
                style="{width: ${widget.options.width}}"
        />
    <#elseif widget.type =='rate'>
        <el-rate
                v-model="${dataModel}"
                :max="${widget.options.max}"
                :disabled="${widget.options.disabled?string("true", "false")}"
                :allow-half="${widget.options.allowHalf?string("true", "false")}"
        />
    <#elseif widget.type == 'color'>
        <el-color-picker
                v-model="${dataModel}"
                :disabled="${widget.options.disabled?string("true", "false")}"
                :show-alpha="${widget.options.showAlpha?string("true", "false")}"
        />
    <#elseif widget.type == 'select'>
        <el-select
                v-model="${dataModel}"
                :disabled="${widget.options.disabled?string("true", "false")}"
                :multiple="${widget.options.multiple?string("true", "false")}"
                :clearable="${widget.options.clearable?string("true", "false")}"
                placeholder="${widget.options.placeholder}"
                style="{width: ${widget.options.width}}"
                filterable="${widget.options.filterable?string("true", "false")}"
        >
            <#if widget.options.remote>
                <#assign options=widget.options.remoteOptions>
            <#else>
                <#assign options=widget.options.options>
                <#list options as item>
                    <el-option
                            key="${item_index}"
                            label="${item.value}"
                    >
                        ${widget.options.showLabel ? string(item.label , item.value)}
                    </el-option>
                </#list>
            </#if>
        </el-select>
    <#elseif widget.type=='switch'>
        <el-switch
                v-model="${dataModel}"
                :disabled="${widget.options.disabled?string("true", "false")}"
        />
    <#elseif widget.type=='slider'>
        <el-slider
                v-model="${dataModel}"
                :min="${widget.options.min}"
                :max="${widget.options.max}"
                :disabled="${widget.options.disabled?string("true", "false")}"
                :step="${widget.options.step}"
                :show-input="${widget.options.showInput}"
                :range="${widget.options.range}"
                style="{width: ${widget.options.width}}"
        />
    <#elseif widget.type=='imgupload'>
        <div>no upload component</div>
    <#elseif widget.type == 'editor'>
        <vue-editor
                v-model="${dataModel}"
                style="{width: ${widget.options.width}}"
        />
    <#elseif widget.type == 'cascader'>
        <el-cascader
                v-model="${dataModel}"
                :disabled="${widget.options.disabled?string("true", "false")}"
                :clearable="${widget.options.clearable?string("true", "false")}"
                placeholder="${widget.options.placeholder}"
                style="{width: ${widget.options.width}}"
                options="${widget.options.remoteOptions}"
        />
    <#elseif widget.type == 'text'>
        <span>{{ dataModel }}</span>
    </#if>
</el-form-item>
</#escape>